<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我就是我,不一样的烟火</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.topimg{
			width: 100%;
		}
		.bottomimg{
			width: 100%;
		}
		.begin{
			position: absolute;
			top: 200px;
			right: 120px;
			
		}
		.myhead{
			transition: filter 0.3s;
			width: 150px;
		}
		.text-a{
			display: block;
			text-decoration: none;
			text-align: center;
			height: 50px;
			line-height: 50px;
			color: white;
			background-color: rgb(0,160,216);
			border-radius: 10px;
			transition: background-color 0.3s;
		}
		.begin:hover .text-a{
			background-color: rgb(0,200,255);
		}
		.text-b{
			font-family: "仿宋"
		}
		.note img{
			width: 550px;
		}
		.note td{
			border-right: 15px solid white;
		}
		.iami{
			margin-top: 30px;
			margin-left: 50px;
			font-family: "仿宋";
			font-weight: bold;
			font-size: 40px;
		}
		.interest{
			margin-top: 10px;
			font-family: "仿宋";
			margin-left: 250px;
			font-weight: bold;
			font-size: 40px;	
		}
	</style>
</head>
<body>
	<img class="topimg" src="./img/top.png">
	<table class="note">
		<div style="margin-left: 10px">注：主页仅在15.6寸显示屏上经过测试，因技术能力不足，在其他尺寸屏幕上可能错位,大屏浏览需要适当放大</div>
		<HR width="77%">
		<tr>
			<td>真B站:</td>
			<td>仿B站:</td>
		</tr>
		<tr>
			<td><img src="./img/bilibili.jpg"></td>
			<td><img src="./img/mybilibili.jpg"></td>
		</tr>
	</table>
	<table class="begin">
		<tr>
			<td><a class="head-a" href="./html/mybilibili.html"><img class="myhead" src="./img/myhead.png"></a></td>
		</tr>
		<tr><td><a class="text-a" href="./html/mybilibili.html">登录</a></td></tr>
		<tr><td class="text-b">进入我的兴趣</td></tr>
	</table>
	<div class="iami">大家好!我是网工一班的周钟华</div>
	<div class="interest">兴趣是上B站,只有这么多了,呐</div>
	<br>
	<img class="bottomimg" src="./img/bottom.png">
</body>
</html>